<style lang="scss" scoped>
.header {
  width: 100%;
  height: 55px;
  display: flex;
  align-items: center;
  justify-content: space-around;

  h4 {
    color: #000;
    font-size: 20px;
  }
}

.menu2 {
  display: flex;
}

.tabs {
  display: flex;
  flex-wrap: wrap;
  background-color: #fff;
  font-size: 14px;
}

.tab {
  margin: 5px;
  padding: 5px;
  margin-left: 10px;
  width: 20%;
  background-color: rgb(240, 245, 253);
  border-radius: 50px;
  text-align: center;
}

.active {
  background-color: #00be8c;
  color: #fff;
}

.tab1 {
  display: flex;
  flex-wrap: wrap;
  background-color: #fff;
  font-size: 14px;
}

.list {
  dl {
    display: flex;
    padding: 10px;

    dt {
      width: 50px;
      height: 100px;

      img {
        width: 50px;
        height: 50px;
      }

      margin: 0 10px;
    }

    dd {
      .name {
        font-size: 20px;
        font-weight: 800;
      }
    }
  }
}
</style>

<template>
  <div>
    <header>
      <van-nav-bar title="北京医院哪家好..." left-arrow @click-left="$router.back()" />
    </header>

    <main>
      <van-tabs v-model:active="active">
        <van-tab title="医院排行榜">
          <PHB></PHB>
        </van-tab>

        <van-tab title="按科室">
          <AKS></AKS>
        </van-tab>
        <van-tab title="按医院">
          <AYY></AYY>
        </van-tab>
      </van-tabs>
    </main>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import axios from 'axios'

// @ts-ignore
import PHB from './PHB/indexView.vue'
// @ts-ignore
import AKS from './AKS/indexView.vue'
// @ts-ignore
import AYY from './AYY/indexView.vue'
import type { ListState } from '../../interface/index'

const active = ref(0)

const listData = ref<ListState[]>([])

const getList = () => {
  axios
    .get('/api/nosocomium/list', {
      params: { pageCode: 1, pageSize: 10, state: '' },
    })
    .then(res => {
      const { data } = res.data

      listData.value = data
    })
}
getList()

</script>
